<template>
  <div class="flex justify-between align-center">
    <div class="text-16 mx-2 flex justify-between">
      <div><EyeOutlined></EyeOutlined> 预览区域</div>
    </div>
    <div>
      <a-checkbox v-model:checked="projectMode.viewMode" class="text-white"> 描述 </a-checkbox>
      <a-checkbox v-model:checked="projectMode.editMode" class="text-white"> 问卷 </a-checkbox>
    </div>
  </div>
  <a-divider style="background-color: #666"></a-divider>
  <div v-if="source.mode" class="h-100 mx-2">
    <div v-if="bus.mode === 'props'">
      <!-- <PropItem /> -->
      <PropChild :data="[currentItem]" />
    </div>
    <div v-if="bus.mode === 'propList'" class="prop-list">
      <PropChild :data="currentList" />
    </div>
    <div class="flex flex-s h-100" v-else-if="bus.mode === ''">
      <div class="text-999">选择一个文件进行预览</div>
    </div>
  </div>
  <div v-else>
    <Source />
  </div>
</template>

<script setup lang="ts">
import { projectMode } from "@/data/config";
import { EyeOutlined } from "@ant-design/icons-vue";
import { computed, ref } from "vue";
import { source } from "../bus/source";
import { treeBus } from "../bus/treeData";
import PropChild from "./PropChild.vue";
import Source from "./Source.vue";

const bus = computed(() => {
  return treeBus;
});
const currentList = computed(() => {
  return treeBus.propList;
});
const currentItem = computed(() => {
  return treeBus.props;
});
</script>

<style scoped lang="scss">
input {
  color: black;
}
.prop-list {
  height: 760px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px #61b8b31a;
    background: #faad142c;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #57afbb1a;
    border-radius: 10px;
  }
}
</style>
